﻿<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8">
    <!-- ctrl+/可快速注释 -->
    <!-- 不写在其他页面会有乱码 -->
    <title>前端练习</title>
    <style type="text/css">
        a {
            /*无下划线*/
            text-decoration: none;
        }
        /*伪类选择器,按照顺序来写*/
        /*未访问的链接 a:link*/
        a:link {
            color: blue;
        }
        /*已访问链接,点击之后可变色a:visited*/
            a:visited {
                color: #CCCCCD;
            }
        /*选择鼠标经过的那个链接 a:hover*/
        a:hover {
            color: skyblue;
        }
        /*选择的是鼠标正在按下还没有弹起鼠标的那个链接 a:active*/
        a:active {
            color: greenyellow;
        }
    </style>
</head>
<body>
    <!-- 目录 -->
    <a href="#biaoti">1.标题标签</a><br />
    <a href="#duanluo">2.段落标签</a><br />
    <a href="#wenben">3.文本格式化标签</a><br />
    <a href="#divsp">4.div和span标签</a><br>
    <a href="#tuxiang">5.图像标签</a><br>
    <a href="#chaolianjie">6.超链接标签</a><br>
    <a href="#biaoge">7.表格标签</a><br />
    <a href="#liebiao">8.列表标签</a><br>
    <a href="#biaodan">9.表单标签</a><br>
    <!--1.标题标签-->
    <h1 id="biaoti">1.标题标签</h1>
    <h2>标题一共有h1到h6共六级,占一行</h2>
    <h3>标题一共有h1到h6共六级</h3>
    <h4>标题一共有h1到h6共六级</h4>
    <h5>标题一共有h1到h6共六级</h5>
    <h6>标题一共有h1到h6共六级</h6>
    <hr />
    <!--2.段落标签-->
    <h1 id="duanluo">2.段落标签</h1>
    <p>孤独是一种主观自觉与他人或社会隔离与疏远的感觉和体验,而非客观状态； [1]  是一个人生存空间和生存状态的自我封闭，孤独的人会脱离社会群体而生活在一种消极的状态之中。</p>
    <p>在烟雨蒙蒙的日子里，听小雨敲窗，捧一本闲适的书，把所有的烦恼都抛开，独享，一个人的时光静好，岁月温柔。</p>
    <hr>
    <div>
        <h1>孤独，其实是一种享受</h1>
        冰封洋<br />
        <font size="2">发布时间：19-06-0700:00 &nbsp;&nbsp; 情感达人，优质创作者<br /><br /></font>

        <p>每个人都需要一段独处的时光，远离尘世的是是非非，抛开情场的恩恩怨怨；走过沧桑流年，守住一个人的清寂，静看尘世的浩荡浮沉，追求属于自己的一片蔚蓝。</p>

        <p>当你一个人的时候，什么都不去想，什么都可以不用做，只是安安静静的，把孤独当成一种享受，在孤独中找回自由的灵魂。</p>

        <p>把现实生活的琐事全部抛到脑后，到一个自己喜欢的地方旅游，享受孤独寂寞，或者是一个人静静的看书，没人叨扰。</p>

        <p>一本书，一盏灯，一杯茶，在书中品味人生，在光阴中静享孤独，宁静而致远，无丝竹之乱爱，无案牍之劳形，偶尔和聊得来的朋友聚一聚就挺好。</p>

        <p>人生最惬意的活法，就是享受孤独。</p>

        <p>叔本华说：没有相当程度的孤独，就不可能有内心的平和。</p>

        <p>孤独是一个人内心本真的归位，真正甘愿承受孤独的人，才会冲破自己思想禁锢的牢笼，腾飞出人生不同凡响的精彩，真正爱上孤独的人，才是最懂生活的人，他们懂在热闹和安静之间调节自我。</p>

        <p>在烟雨蒙蒙的日子里，听小雨敲窗，捧一本闲适的书，把所有的烦恼都抛开，独享，一个人的时光静好，岁月温柔。</p>

        <p>远离社会的勾心斗角，放慢生活的节奏，放慢人生的脚步，身边的一切都变成了风景，在孤独中享受一份惬意的心情。</p>

        <p>不负孤独，不负时光。</p>

        <p>越优秀的人，越享受孤独。<p>
    </div>
    <!--文本格式化标签-->
    <hr />
    <h1 id="wenben">3.文本格式化标签</h1>
    <strong>加粗</strong>&nbsp;
    <b>加粗</b><br />
    <em>倾斜</em>&nbsp;
    <i>倾斜</i><br />
    <del>删除线</del>&nbsp;
    <s>删除线</s><br />
    <ins>下划线</ins>&nbsp;
    <u>下划线</u>
    <!--4.div和span-->
    <hr />
    <h1 id="divsp">4.div和span标签</h1>
    <div>div标签一行只能放一个div</div>
    <div>div标签一行只能放一个div</div>
    <span>span标签一行能放多个span</span>
    <span>span标签一行能放多个span</span>
    <!--5.图像标签-->
    <hr />
    <h1 id="tuxiang">5.图像标签</h1>
    <div>
        <img src="images/河正宇.jpg" title="河正宇的靓照" width="300" />
        <!--title为鼠标放上去时的提示文本-->
        <!--开发中只需要修改width或height中的一个，让它等比例缩放-->
    </div>
    <div>
        <img src="images/河正宇1.jpg" alt="河正宇的抽烟照" />
        <!--图片不能显示时，用alt里面的文本来替换-->
    </div>
    <!--6.超链接标签-->
    <hr />
    <h1 id="chaolianjie">6.超链接标签</h1>
    <a href="http://i.chaoxing.com/base?t=1600336416524" target="_blank">外部链接：学习通</a><br />
    <!--默认打开方式是_self(当前窗口打开页面)，_blank(新窗口打开页面)-->
    <!--空连接：href里面为 # -->
    <a href="PPT.zip">下载链接，点击下载</a><br />
    <!--如果href里面地址是一个文件或者压缩包，会下载这个文件-->
    <a href="https://www.baidu.com/index.php?tn=monline_3_dg" target="_blank"><img src="images/result.png" title="百度一下，你就知道" /></a><br />
    <!--其它元素链接，如图像链接-->
    <!--锚点链接-->
    -----锚点链接-----<br />
    <a href="#live">生活</a><br />
    <a href="#xihao" id="fanhui">喜好</a><br />
    <a href="#zuoping">作品</a>
    <div>
        <h3 id="live">生活</h3>
        生活是美好的，毕竟我们得好好活着。
    </div>
    <div>
        <h3 id="xihao">喜好</h3>
        你是不是喜欢唱、跳、rap、篮球。
        &nbsp;&nbsp;
        <a href="#fanhui">返回</a>
    </div>
    <div>
        <h3 id="zuoping">作品</h3>
        作品有《姬霓太美》
    </div>
    <!-- 锚点连接：href中的#后面的元素与其他项的id元素相同，方可实现跳转 -->
    <!-- 7.表格标签 -->
    <hr />
    <h1 id="biaoge">7.表格标签</h1>
    <table align="center" border="1" cellpadding="5" cellspacing="0">
        <!--cellpadding是文字与表格边框的距离，cellspacing是表格与表格的距离-->
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>照片</th>
                <!-- th,表头单元格，居中加粗 -->
            </tr>
        </thead>
        <!-- thead用于定义表格头部 -->
        <tbody>
            <tr>
                <td>张三</td>
                <td>28</td>
                <td>男</td>
                <td rowspan="3">照片</td>
                <!-- 合并行 -->
            </tr>
            <tr>
                <td colspan="2">李四</td>
                <!-- 合并列 -->
                <td>女</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>66</td>
                <td>男</td>
            </tr>
        </tbody>
        <!-- tbody用于定义表格主体 -->
    </table>
    <!-- 8.列表标签 -->
    <hr />
    <h1 id="liebiao">8.列表标签</h1>
    <!-- 无序列表 -->
    <ul>
        <li>无序列表1</li>
        <li><h5>无序列表2</h5></li>
        <li>无序列表3</li>
    </ul>
    <!-- <ul></ul>中只能嵌套<li></li> ,而<li></li>中可嵌套其它标签-->
    <!-- 有序列表 -->
    <ol>
        <li>有序列表1</li>
        <li>有序列表2</li>
        <li>有序列表3</li>
    </ol>
    <!-- 自定义列表 -->
    <dl>
        <dt>关注我们</dt>
        <dd>新浪微博</dd>
        <dd>官方微信</dd>
        <dd>联系我们</dd>
    </dl>
    <!-- 9.表单标签 -->
    <hr />
    <h1 id="biaodan">9.表单标签</h1>
    <form action="#" method="post" name="name1">
        <label for="user">用户名：</label><input type="text" name="username" id="user" placeholder="请输入用户名" maxlength="6"><br /><br />
        <!-- label标签里的for和input标签里的id要对应，为了使点击用户名时也能跳入到文本框里面，增加用户体验 -->
        <!-- maxlength规定输入字符个数 -->
        <label for="psw">密&nbsp;&nbsp;&nbsp;码：</label> <input type="password" name="password" id="psw" placeholder="请输入密码"><br /><br />
        性&nbsp;&nbsp;&nbsp;别：
        <input type="radio" name="sex" id="nan" value="男" checked="checked"><label for="nan">男</label>
        <!-- checked规定此input元素首次加载时被选中 -->
        <input type="radio" name="sex" id="nv" value="女"><label for="nv">女</label><br /><br />
        爱&nbsp;&nbsp;&nbsp;好：
        <input type="checkbox" name="hobbys" id="chang" value="唱"><label for="chang">唱</label>
        <input type="checkbox" name="hobbys" id="tiao" value="跳" checked="checked"><label for="tiao">跳</label>
        <input type="checkbox" name="hobbys" id="basketball" value="篮球"><label for="basketball">篮球</label>
        <!-- 单选框和复选框得有相同的名字 -->
        <br /><br />
        籍&nbsp;&nbsp;&nbsp;贯：
        <select>
            <option>广西</option>
            <option>广东</option>
            <option selected="selected">河南</option>
            <option>北京</option>
        </select>
        <select>
            <option disabled>--请选择年--</option>
            <option>2020年</option>
            <option>2019年</option>
            <option>2018年</option>
            <option disabled>2017年</option>
        </select>
        <select>
            <option disabled>--请选择月--</option>
            <option>1月</option>
            <option>2月</option>
            <option>3月</option>
            <option>4月</option>
        </select>
        <select>
            <option disabled>--请选择日--</option>
            <option>1日</option>
            <option>2日</option>
            <option>3日</option>
            <option>4日</option>
        </select>
        <br /><br />
        <label for="jieshou">个人介绍</label>
        <textarea placeholder="请输入内容" id="jieshou"></textarea><br /><br />
        文件上传：<input type="file"><br /><br />
        <input type="submit" value="登录">
        &nbsp;&nbsp;&nbsp;
        <input type="reset" value="重置">

    </form>
</body>
</html>